<template>
  <div>
    <BreadCrumbShow :pageTitle="pageTitle"  />
    <!-- v-if="isShowBreadCrumb" -->
    <!-- <PageTitle pageTitle="窍详细" v-else /> -->

    <div class="box-detail-pic-box">
      <div class="track-title">窍编号： {{ boxDetailInfo.boxCode }}</div>

      <div class="box">
        <div class="top-status">
          <div class="status">
            当前状态：
            {{
              boxDetailInfo.boxStatus &&
              commonFun.getLabel(boxStatus, boxDetailInfo.boxStatus)
            }}
          </div>
          <div class="tips" v-if="rfidLabel.length > 0">
            <span>档案正被</span>
            <span v-for="rfid in rfidLabel" :key="rfid.labelCode">
              {{ rfid.labelCode }} ({{
                rfid.labelType == 0 ? "身份标签" : "封条标签"
              }})
            </span>
            <span>标签保护。</span>
          </div>
        </div>
        <div class="bottom">
          <div class="left-pic">
            <div class="left-pic-top">
              <el-carousel :interval="5000" arrow="always" :autoplay="false" :loop="false">
                <div v-if="boxPicList.length > 0">
                  <el-carousel-item v-for="item in boxPicList" :key="item.id">
                    <div class="img-box">
                      <!-- <img class="img" :src="item" /> -->
                      <el-image
                        class="img"
                        :src="item"
                        fit="contain"
                        :preview-src-list="boxPicList">
                      </el-image>
                    </div>
                  </el-carousel-item>
                </div>
                <div v-else class="nothing">
                  <span class="notext">暂无图片</span>
                </div>
              </el-carousel>
            </div>
          </div>
          <div class="right-tag">
            <div class="cardBox card-tag">
              <div class="tag-top">
                <img
                  class="icon-img"
                  src="../assets/images/form/tag.png"
                  alt="" />
                <el-button type="text" @click="addTags"> 添加标签 </el-button>
              </div>

              <div class="tagList">
                <span v-for="(tagInfo, index) in boxTagList" :key="index">
                  <el-tag
                    v-if="tagInfo.tag.length <= 15 && tagInfo.isEdited"
                    class="tag"
                    effect="plain"
                    size="medium"
                    closable
                    @close="deleteTag(tagInfo)"
                    @click="tagClickGo(tagInfo)"
                    >{{ tagInfo.tag }}</el-tag
                  >
                  <el-tag
                    v-if="tagInfo.tag.length <= 15 && !tagInfo.isEdited"
                    class="tag"
                    effect="plain"
                    size="medium"
                    type="info"
                    @click="tagClickGo(tagInfo)"
                    >{{ tagInfo.tag }}</el-tag
                  >

                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="tagInfo.tag"
                    placement="top">
                    <el-tag
                      v-if="tagInfo.tag.length > 15"
                      class="tag"
                      size="medium"
                      effect="plain"
                      closable
                      @close="deleteTag(tagInfo)"
                      @click="tagClickGo(tagInfo)">
                      {{ tagInfo.tag.substring(0, 15) + "..." }}
                    </el-tag>
                  </el-tooltip>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="quarantine"></div>
    <el-row type="flex">
      <el-col :span="24">
        <div class="card-elec cardBox">
          <p class="track-title">电子化信息</p>

          <ElTable
            refName="boxElectronicsList"
            :data-source="electronizeFileList"
            :data-config="electronicsTableConfig">
            <template #operate="{ scope }">
              <el-button
                size="mini"
                type="warning"
                @click="downloadFile(scope.row)"
                round>
                <i class="iconfont icon-download-alt"></i>下载
              </el-button>
            </template>
          </ElTable>
        </div>
      </el-col>
    </el-row>

    <div class="quarantine"></div>

    <el-row type="flex">
      <el-col :span="24">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label">操作记录</span>

            <div class="card-log">
              <div class="wrapFlex" v-if="activityList.length > 0">
                <div class="mrauto">
                  <el-button size="mini" @click="exportPdf()"
                    ><img
                      class="export-img"
                      src="@/assets/images/detail/pdf.png"
                      alt="导出调阅记录" />
                    {{
                      !showExportLoading ? "导出调阅记录" : "导出中..."
                    }}</el-button
                  >
                </div>
              </div>
              <div class="card-log-box">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in activityList"
                    :key="index"
                    :type="index == 0 ? lastType : type"
                    :size="index == 0 ? lastSize : size"
                    :icon="index == 0 ? lastIcon : icon"
                    :timestamp="activity.timestamp"
                    placement="top"
                    hide-timestamp>
                    <div class="timeline-item-out">
                      <div class="top">
                        <div class="left">
                          <div class="timestamp">
                            {{ activity.timestamp }}
                          </div>
                          <div class="content-box">
                            <span class="people">
                              {{ activity.operator }}
                            </span>
                            <div class="content">
                              <!-- <span>{{ activity.action }}{{ activity.orderSubType }} </span> -->
                              <span> {{ activity.remark }} </span>
                              <span v-if="activity.orderNum">, 订单号：</span>
                              <span class="content-order" v-if="activity.orderNum" @click="goOrderDetail(activity.orderId)">{{ activity.orderNum }} </span>
                              <img
                                v-show="activity.businessId && activity.showAnt"
                                @click="antClick(activity)"
                                class="ant"
                                src="@/assets/images/detail/chain.png"
                                alt="蚂蚁链" />
                            </div>
                          </div>
                        </div>
                        <div
                          class="right"
                          @click="showDetail(activity, index, true)"
                          v-if="activity.isShowLogDetail == false && activity.actionLogList != null">
                          <i class="el-icon-arrow-right"></i>
                        </div>
                        <div
                          class="right"
                          @click="showDetail(activity, index, false)"
                          v-if="activity.isShowLogDetail == true && activity.actionLogList != null">
                          <i class="el-icon-arrow-up"></i>
                        </div>
                      </div>

                      <div
                        class="item-content"
                        v-if="activity.isShowLogDetail == true">
                        <div
                          v-for="(actionLog, i) in activity.actionLogList"
                          :key="i">
                          <div class="timeline-item">
                            <div class="left">
                              <div class="timestamp">
                                {{ actionLog.timestamp }}
                              </div>
                              <div class="content">
                                <span>{{ actionLog.content }} </span>
                                <img
                                  v-if="actionLog.businessId && actionLog.showAnt"
                                  @click="antClick(actionLog)"
                                  class="ant"
                                  src="@/assets/images/detail/chain.png"
                                  alt="蚂蚁链" />
                              </div>
                            </div>
                            <div class="right">
                              <span class="people">
                                {{ actionLog.operator }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 子时间轴 -->
                  </el-timeline-item>
                </el-timeline>

                <div class="log-empty" v-if="activityList.length == 0">
                  暂无记录
                </div>

                <div
                  class="show-more"
                  v-if="logPageSize == activityList.length">
                  <span @click="showMoreLog"
                    ><i class="el-icon-arrow-down"></i> 加载更多</span
                  >
                </div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="盘点记录">
            <ElTable
              refName="boxInventoryList"
              @pageChange="pageChange"
              :data-source="boxScanList"
              :data-config="tableConfig"
              :total="total"
              :pageSize="pageSize"
              :pageNum="pageNum"
              :isLoading="isLoading">
              <template #boxCode="{ scope }">
                <span>{{ boxDetailInfo.boxCode }}</span>
              </template>
              <template #labelType="{ scope }">
                <span>{{
                  scope.row.labelType == 0 ? "身份标签" : "封条标签"
                }}</span>
              </template>
            </ElTable>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="dialogVisible"
      width="20%"
      :before-close="handleClose">
      <p class="dialogTitle" style="margin-bottom: 10px">
        添加自定义
        <span class="primary">标签</span>
        <span class="tips">（多个标签用“，”分开）</span>
      </p>
      <el-input
        placeholder="请输入标签内容"
        v-model="tagInput"
        clearable></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium"
          >取 消</el-button
        >
        <el-button type="primary" @click="addTagSubmit" size="medium"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <AntInfo :isShow="isShowAnt" :currentInfo="currentInfo" @closeDialog="closeDialog"/>
  </div>
</template>

<script>
import axios from "axios";
import Cookies from "js-cookie";
import BreadCrumbShow from "@/components/BreadCrumbShow";
// 导入占位图片
import minBoxPng from "@/assets/images/detail/stand.png";
import ElTable from "@/components/table/ElTable.vue";
import PageTitle from "@/components/PageTitle";
import {
  getUserBoxDetail,
  getTaglistByUserBoxId,
  addUserTag,
  deleteUserTag,
  getBoxFileList,
  getBoxFileDetail,
  getBoxPicList,
  getBoxLog,
} from "../api/access-manage/index";
import { lookAntChainInfo } from "@/api/access-manage/index";

import { getLabelByBoxId } from "@/api/member/rfid.js";
import { getBoxScanList } from "@/api/inventory/index";
import { boxStatus, boxLogLabel } from "@/utils/dictionary.js";
import AntInfo from '@/components/special/AntInfo.vue'

export default {
  name: "BoxDetail",
  components: {
    BreadCrumbShow,
    ElTable,
    PageTitle,
    AntInfo
  },
  data() {
    return {
      currentInfo: {},
      isShowAnt: false,
      isShowBreadCrumb: true,
      showExportLoading: false,
      boxStatus: boxStatus,
      userBoxId: "",
      boxDetailInfo: {},
      boxTagList: [],
      dialogVisible: false,
      tagInput: "",
      pageTitle: "窍详情",
      electronizeFileList: [], // 电子化列表
      boxPicList: [],
      // 电子化
      electronicsTableConfig: [
        this.companyType == 2 && {
          prop: "patientNum",
          label: "住院号",
        },
        this.companyType == 2 && {
          prop: "patientName",
          label: "姓名",
        },
        {
          prop: "number",
          label: "档案盒号",
        },
        {
          prop: "pages",
          label: "页数",
        },
        {
          prop: "userName",
          label: "电子化申请人",
        },
        {
          prop: "createdOn",
          label: "电子化时间",
        },
        {
          prop: "operate",
          label: "操作",
        },
      ].filter(e => e),

      // 操作记录相关
      size: "normal ",
      icon: "",
      type: "",
      lastSize: "large",
      lastType: "primary",
      lastIcon: "el-icon-more",
      activityList: [],
      rfidLabel: [],
      boxTrackStyle: {
        maxHeight: 300 + "px",
        overflowY: "auto",
      },
      // 盘点记录相关
      boxScanList: [],
      tableConfig: [
        {
          prop: "boxCode",
          label: "窍编号",
        },
        {
          prop: "labelCode",
          label: "标签编码",
        },
        {
          prop: "labelType",
          label: "标签类型",
        },
        {
          prop: "scanLabelTime",
          label: "盘点时间",
        },
      ],
      isLoading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      companyType: 0,
      logPageSize: 10,
    };
  },
  created() {
    this.isShowBreadCrumb = !(this.$route.fullPath.indexOf("offshelf") > -1);
    // companyType == 2 医院客户 显示住院号和姓名
    this.companyType = JSON.parse(
      localStorage.getItem("localUserInfo")
    ).company.type;
    this.userBoxId = this.$route.params.id;

    this.getUserBoxDetail(this.$route.params.id);
    // this.getTaglistByUserBoxId();

    // this.getBoxFileList(this.$route.params.id);
    // this.getBoxPicList(this.$route.params.id);
    // this.getBoxLog();
    // this.getBoxScanList();
  },
  mounted() {},
  methods: {
    // 蚂蚁链点击
    antClick(item) {
      this.isShowAnt = true
      this.currentInfo = item
    },
    closeDialog() {
      this.isShowAnt = false
    },
    // 去订单详情
    goOrderDetail(orderId) {
      let routeUrl = this.$router.resolve({
        name: "OrderDetail",
        params: { id: orderId },
      });
      window.open(routeUrl.href, "_blank");
    },
    // 点击查看操作日志 内容
    showDetail(activity, index, type) {
      // this.activityList.filter(
      //   m => activity.orderId === m.orderId
      // )[0].isShowLogDetail = type;
      this.activityList[index].isShowLogDetail = type;
    },
    // 点击tag去搜索
    tagClickGo(tagInfo) {
      let routeUrl = this.$router.resolve({
        path: "/retrieval/apply",
        query: { tag: tagInfo.tag },
      });
      window.open(routeUrl.href, "_blank");
    },
    // 获得 窍 电子化列表
    getBoxFileList(userBoxId) {
      // 1107173
      const data = {
        userBoxId: userBoxId,
        type: 0, // 电子化
      };
      getBoxFileList(data).then(res => {
        res.data.length > 0 &&
          res.data.map(e => {
            e.createdOn =
              e.createdOn &&
              this.$moment(e.createdOn * 1000).format("YYYY-MM-DD HH:mm:ss");
            e.updatedOn =
              e.updatedOn &&
              this.$moment(e.updatedOn * 1000).format("YYYY-MM-DD HH:mm:ss");
          });

        this.electronizeFileList = res.data || [];
      });
    },
    // 获得 窍图片列表
    getBoxPicList(userBoxId) {
      // 1107287
      getBoxPicList(userBoxId).then(res => {
        // this.boxPicList = res.data || [];
        res.data.map(e => {
          this.boxPicList.push(e.path);
        });
        if (res.data.length === 0) {
          this.boxPicList = [];
        }
      });
    },
    // 加载更多 操作记录
    showMoreLog() {
      this.logPageSize = this.logPageSize + 10;
      this.getBoxLog();
    },
    // 获得窍操作记录
    getBoxLog() {
      // 1107173  ?userBoxId=${userBoxId}
      getBoxLog({
        userBoxId: this.userBoxId,
        pageSize: this.logPageSize,
        pageNum: 1,
      }).then(res => {
        res.data && res.data.map(e => {
          e.timestamp =
            e.createOn &&
            this.$moment(e.createOn * 1000).format("YYYY-MM-DD HH:mm:ss");

          e.isShowLogDetail = false;
          e.actionLogList && e.actionLogList.map(m => {
            m.timestamp =
              m.createdOn &&
              this.$moment(m.createdOn * 1000).format("YYYY-MM-DD HH:mm:ss");
            m.content = m.remark;
          });
          // this.commonFun.getLabel(boxLogLabel, e.action) + " - " + e.remark;

          // 请求查看蚂蚁链 - 有值返回 则显示蚂蚁链的图标， 无正常返回值则不显示
          // e.businessId = '162918591222003945'
          if (e.businessId) {
            // 请求蚂蚁链
            const params = {
              contractMethod: "LABEL_DATA",
              businessId: e.businessId,
            };
            new Promise(resolve => {
              lookAntChainInfo(params).then(resW => {
                if (resW.data && resW.data.resultCode == 'OK') e.showAnt = true
              })
            })
          }

          e.actionLogList && e.actionLogList.map(m => {
            // m.businessId = '161918591222003945'
            if (e.businessId) {
              const paramsA = {
                contractMethod: "LABEL_DATA",
                businessId: m.businessId,
              };
              new Promise(resolve => {
                lookAntChainInfo(paramsA).then(resM => {
                  if (resM.data && resM.data.resultCode == 'OK') m.showAnt = true
                })
              })
            }
          })
        });

        setTimeout(() => {
          this.activityList = res.data;
        }, 1800)
      });
    },
    // 获得当前窍的电子标签
    getLabelByBoxId(boxId) {
      getLabelByBoxId(boxId).then(res => {
        this.rfidLabel = res.data;
      });
    },
    // 获得窍盘点记录
    getBoxScanList() {
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      getBoxScanList(this.userBoxId, params).then(res => {
        res.data.map(e => {
          e.scanLabelTime =
            e.scanLabelTime &&
            this.$moment(e.scanLabelTime * 1000).format("YYYY-MM-DD HH:mm:ss");
        });
        this.boxScanList = res.data;
        this.total = res.total;
      });
    },

    // 窍盘点记录 分页数据变动
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getBoxScanList();
    },

    // 获得窍详情
    getUserBoxDetail(boxId) {
      new Promise(resolve => {
        getUserBoxDetail(boxId)
          .then(res => {
            this.boxDetailInfo = res.data;
            this.getLabelByBoxId(res.data.boxId);

            this.getTaglistByUserBoxId();
            this.getBoxFileList(this.$route.params.id);
            this.getBoxPicList(this.$route.params.id);
            this.getBoxLog();
            this.getBoxScanList();
          })
          .catch(err => {});
      });
    },
    // 获得 窍标签
    getTaglistByUserBoxId() {
      getTaglistByUserBoxId({ userBoxId: this.userBoxId }).then(res => {
        this.boxTagList = res.data.filter(e => e.tag != ';' && e.tag != '；');
      });
    },
    // 添加标签 展示弹窗
    addTags() {
      this.dialogVisible = true;
      this.tagInput = "";
    },
    // 添加标签 确认
    addTagSubmit() {
      if (this.tagInput == "") {
        this.$message({
          type: "error",
          message: "请输入标签内容",
        });
        return;
      }

      // 将中文的，转换成英文,  再进行分割
      const tagList = this.tagInput
        .replace(/，/gi, ",")
        .split(",")
        .filter(e => e.trim());
      if (tagList.length == 0) {
        this.$message({
          type: "error",
          message: "请检查填写的标签",
        });
        return;
      }
      this.dialogVisible = false;

      addUserTag({ tagList: tagList, userBoxId: this.userBoxId }, {}).then(
        res => {
          this.getTaglistByUserBoxId();
          setTimeout(() => {
            this.$message({
              type: "success",
              message: "标签添加成功",
            });
          }, 500);
        }
      );
    },
    // 添加标签 关闭
    handleClose() {
      this.dialogVisible = false;
    },
    // 删除 单个标签
    deleteTag(tag) {
      this.$confirm("确定删除标签吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        new Promise(resolev => {
          this.boxTagList.splice(this.boxTagList.indexOf(tag), 1);
          // 删除当前的tag
          deleteUserTag({ userBoxId: this.userBoxId, userTagId: tag.id }).then(
            res => {
              this.$message({
                type: "success",
                message: "标签删除成功",
              });
              this.getTaglistByUserBoxId();
            }
          );
        });
      });
    },
    // 调阅记录导出
    exportPdf() {
      this.showExportLoading = true;
      axios
        .get("/api/depot/actionLog/exportBorrowPDF", {
          headers: {
            Authorization: JSON.parse(Cookies.get("userInfo")).token,
          },
          responseType: "blob",
          params: { userBoxId: this.userBoxId },
        })
        .then(response => {
          this.showExportLoading = false;
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          let fname =
            "调阅记录_" +
            this.$moment(new Date()).format("YYYY-MM-DD") +
            ".pdf";

          link.href = url;
          link.setAttribute("download", fname);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
    },
    //  下载
    downloadFile(row) {
      getBoxFileDetail(row.id).then(res => {
        const a = document.createElement("a");
        a.style.display = "none";
        a.href = res.data.path;
        a.setAttribute("download", `${row.userBoxId}电子化文件.pdf`);
        a.target = "_blank";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.box-detail-important {
  margin-top: 20px;
  background-color: #fff7eb;
  border: 1px solid #f6cd93;
  padding: 15px 20px;
  font-size: 14px;
  .line {
    display: flex;
    align-items: center;
    .left {
      height: 24px;
      line-height: 24px;
      width: 75px;
      display: inline-block;
      text-align: right;
    }
  }
}

.card-border {
  border: 1px solid #dddddd;
  padding: 15px 20px;
  border-radius: 4px;
  margin: 15px 0 0;
}

.card-tag {
  .tag-top {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
    .tit {
      font-weight: bold;
      margin: 0 20px -5px 8px;
    }
  }
}

.dialogTitle {
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
}
.dialogTitle > .primary {
  color: #eb5405;
}
.dialogTitle > .tips {
  font-size: 13px;
  font-weight: normal;
}

.card-log-box {
  max-height: 430px;
  overflow-y: auto;
  padding: 20px 20px;
  /*&::-webkit-scrollbar {
    display: none;
  }*/
  .timeline-item-out {
    width: 90%;
    border: 1px solid #e4e7ed;
    padding: 10px 25px;
    border-radius: 20px;
    //margin: 0 20px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .right {
        margin: 0 20px 0 0;
        font-size: 25px;
        cursor: pointer;
      }
      .left {
        line-height: 24px;

        .content-box {
          display: flex;
          .people {
            margin-right: 20px;
          }
          .content {
            .content-order {
              color: #f88123;
              cursor: pointer;
            }
  
            .ant {
              // 蚂蚁链图标
              height: 16px;
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .item-content {
      border-top: 1px solid #e9e7e7;
      margin: 15px 0 0 0;
      padding: 15px 0;
      color: #666;
    }
    .timeline-item {
      width: 90%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      line-height: 22px;

      .left {
        display: flex;
        width: 950px;
        line-height: 28px;

        .timestamp {
          margin-right: 10px;
          width: 170px;
        }
        .content {
          word-wrap: break-word;
          width: calc(100% - 170px);
          img {
            height: 16px;
            margin-left: 6px;
            cursor: pointer;
          }
        }
      }
      .right {
        width: 145px;
        text-align: right;
      }
    }
  }

  .log-empty {
    color: #999999;
    margin-top: 10px;
  }
  .show-more {
    text-align: center;
    color: #f88123;
    margin-bottom: 10px;
    span {
      cursor: pointer;
    }
  }
}

.box-detail {
  background-color: #fff7eb;
  border: 1px solid #f6cd93;
  font-size: 14px;
  margin-bottom: 30px;
}
.box-detail strong {
  height: 24px;
  line-height: 24px;
  width: 75px;
  display: inline-block;
  text-align: right;
}
.tag {
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
}
.tag-outer {
  margin: 15px 0;
}
.track-outer {
  margin-top: 20px;
}
.track-title {
  font-size: 16px;
  border-left: none;
  height: 30px;
  line-height: 30px;
  color: #444;
  font-weight: 700;
  margin: 10px 0;
}

.quarantine {
  width: calc(100% + 40px);
  height: 10px;
  background-color: #eff1f5;
  margin: 10px -20px;
}

.box-detail-pic-box {
  padding: 10px 0;
  .box {
    border: 1px solid #e4e7ed;

    .top-status {
      line-height: 25px;
      border-bottom: 1px solid #cfcfcf;
      padding: 10px 0 10px 10px;
      .status {
        font-size: 14px;
        font-weight: bold;
      }
    }

    .bottom {
      display: flex;
      .left-pic {
        width: 78%;
        .left-pic-top {
          .nothing {
            position: relative;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url("../assets/images/nothing.png") no-repeat center;
            .notext {
              position: absolute;
              bottom: 150px;
              font-size: 24px;
              color: #afb1b5;
            }
          }
          ::v-deep .el-carousel__container {
            height: 600px;
            .img-box {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              .img {
                height: 100%;
                width: 82%;
                margin: 0 auto;
              }
            }
          }
        }
        .left-pic-bottom {
          ::v-deep .el-carousel__container {
            height: 100px;
            padding: 10px 0;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .el-carousel__item {
              width: 140px;
              position: static !important;
            }
            .img-box {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              .img {
                width: 60%;
                margin: 0 auto;
              }
            }
          }
        }
      }
      .right-tag {
        width: 22%;
        padding: 20px 30px;

        background: #f5f7fa;

        .card-tag {
          .tag-top {
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-bottom: 10px;
            .tit {
              margin: 0 20px -5px 8px;
            }
            .icon-img {
              margin: 0 10px 0 0;
            }
          }
          .tagList {
            // border: 1px solid #333;
            height: 500px;
            overflow-y: scroll;
            &::-webkit-scrollbar {
              // display: none;
              // width: 100px;
            }
          }
        }
      }
    }
  }
}
.card-elec {
  padding-bottom: 20px;
}

.export-img {
  float: left;
  margin-right: 6px;
  height: 14px;
}

::v-deep .tag-list {
  .el-tag {
    margin-bottom: 10px;
  }
}

.el-tabs {
  margin: 10px 0;
}

::v-deep .el-tabs__header .el-tabs__item {
  font-size: 16px;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #444;
  font-weight: 700;
}

::v-deep .el-button--mini {
  font-size: 14px;
}
</style>
